<template>
    <el-form :model="form" label-width="120px">
      <el-form-item label="uuid">
        <el-input v-model="form.uuid" readonly="readonly"/>
      </el-form-item>
      <el-form-item label="支付类型">
        <el-select v-model="form.type" placeholder="请选择支付类型" @change="changeFormType">
          <el-option v-for="type in types" :label="type.name" :value="type.type"/>
        </el-select>
      </el-form-item>
      <component v-bind:is="currentComponent" :data="form.param"></component>
      
      <el-form-item label="状态">
        <el-switch
            v-model="form.status"
            active-text="有效"
            inactive-text="无效"
            :active-value="1"
            :inactive-value="0"
            inline-prompt
            width="48px"
            class="is-rect"
        />
      </el-form-item>
    </el-form>
  </template>
  
<script lang="ts" setup>
  import { reactive, defineAsyncComponent, ref } from 'vue'

  const form = ref({
    uuid: '',
    region: '',
    param: {},
    extra: {},
    status: 1,
  })

  let currentComponent = ref()

  const types = reactive([{
    name: "微信支付",
    type: "wxpay", 
    component: defineAsyncComponent(() => import("./wxpay.vue"))
  }, {
    name: "阿里支付",
    type: "alipay", 
    component: defineAsyncComponent(() => import("./alipay.vue"))
  }, {
    name: "百度收银台",
    type: "baidu", 
    component: defineAsyncComponent(() => import("./baidu.vue"))
  }, {
    name: "PayPal支付",
    type: "paypal", 
    component: defineAsyncComponent(() => import("./paypal.vue"))
  }])

  
  const changeFormType = (type: string) => {
    
    for (let index = 0; index < types.length; index++) {
        const element = types[index];
        if(element.type == type){
            console.log('submit!', type)
            currentComponent.value = element.component
        }
    }
  }

  
// setInterval(() => {
//     console.log(form.value) 
// }, 2000)
</script>